<template>
    <div>
      <img :src="imgs[index]" width="300px" height="300px"><br>
      <button type="button" @click="toLeft">左</button>
      <button type="button" @click="toRigth">右</button>
    </div>
<!--  <img src="./static/img/d.jpg">-->
</template>

<script>
    export default {
        name: "fiist",
        data(){
          return {
            imgs: ["../../static/img/d.jpg","../../static/img/t.jpg","../../static/img/y.jpg","../../static/img/f.jpg"],
            index:0
          }},
          methods: {
            toLeft: function () {
              this.index--;
              if (this.index < 0) {
                this.index = this.imgs.length - 1;
              }
            },
            toRigth: function () {
              this.index++;
              if (this.index > this.imgs.length - 1) {
                this.index = 0;
              }
            }
          }
    }
</script>

<style scoped>

</style>
